$(function () {
  // 提示处理     options:{value:提示语   type:类型类名  "error"  "normal"  "success"  callback:回调函数}
  function handleTips(options) {
    // 定时器
    var timer;
    // 提示语盒子
    var msgBox = $(".message");
    // 提示语元素
    var msgEle = $(".message span");
    // id名
    var $id = options.type || "normal";
    msgBox.attr("id", $id);
    msgEle.html(options.value);
    msgBox.show();
    timer = setTimeout(function () {
      msgBox.hide();
      clearTimeout(timer);
    }, 1500);
    // 回调
    if (options.callback) {
      options.callback();
    }
  }
  // 添加前缀0
  function prefixZero(num, n) {
    return (Array(n).join(0) + num).slice(-n);
  }
  // 转换时间格式  date:时间    format:格式
  // eg:dateFormatter(1294805542000, "yyyy-MM-dd HH:mm:ss")
  function dateFormatter(date, format) {
    const t = new Date(date);
    if (t.toString() === "Invalid Date") {
      return "invalid date";
    }
    return format.replace(
      /yyyy|MM|M|WW|W|ww|w|dd|d|HH|H|hh|h|mm|m|ss|s|A|a/g,
      function (type) {
        switch (type) {
          case "yyyy": // 年 2011
            return prefixZero(t.getFullYear(), 4);
          case "MM": // 月 01
            return prefixZero(t.getMonth() + 1, 2);
          case "M": // 月 1
            return t.getMonth() + 1;
          case "WW": // 周 01
            return prefixZero(t.getDay(), 2);
          case "W": // 周 1
            return t.getDay();
          case "ww": // 周 星期一
            return "星期" + "日一二三四五六".charAt(t.getDay());
          case "w": // 周 周一
            return "周" + "日一二三四五六".charAt(t.getDay());
          case "dd": // 日 02
            return prefixZero(t.getDate(), 2);
          case "d": // 日 2
            return prefixZero(t.getDate(), 2);
          case "HH": // 小时 24小时制 03
            return prefixZero(t.getHours(), 2);
          case "H": // 小时 24小时制 3
            return prefixZero(t.getHours(), 2);
          case "hh": // 小时 12小时制 03
            return prefixZero(t.getHours() % 12, 2);
          case "h": // 小时 12小时制 3
            return prefixZero(t.getHours() % 12, 2);
          case "mm": // 分钟 04
            return prefixZero(t.getMinutes(), 2);
          case "m": // 分钟 4
            return t.getMinutes();
          case "ss": // 秒 05
            return prefixZero(t.getSeconds(), 2);
          case "s": // 秒 5
            return t.getSeconds();
          case "A":
            return t.getHours() < 12 ? "AM" : "PM";
          case "a":
            return t.getHours() < 12 ? "am" : "pm";
        }
      }
    );
  }
  // 指定滚动到到最底部
  function scrollBottom() {
    // 聊天室
    var Ele = $(".content_left");
    // 最底部
    var ele = Ele.find(".word_item:last-child");
    if (ele.length == 0) return;
    // 最后面的.addword元素
    var addEle = ele.find(".addword").children(":first");
    // 标签名
    var addNodeName = addEle.prop("nodeName");
    switch (addNodeName) {
      case "IMG":
        // 图片
        addEle.load(function () {
          var top =
            ele.offset().top -
            Ele.offset().top +
            ele.height() +
            Ele.scrollTop();
          Ele.scrollTop(top);
        });
        break;
      case "AUDIO":
        // 音频
        addEle[0].onloadedmetadata = function () {
          var top =
            ele.offset().top -
            Ele.offset().top +
            ele.height() +
            Ele.scrollTop();
          Ele.scrollTop(top);
        };
        break;
      case "VIDEO":
        // 视频
        addEle[0].onloadedmetadata = function () {
          var top =
            ele.offset().top -
            Ele.offset().top +
            ele.height() +
            Ele.scrollTop();
          Ele.scrollTop(top);
        };
        break;
      default:
        // 其他
        var top =
          ele.offset().top - Ele.offset().top + ele.height() + Ele.scrollTop();
        Ele.scrollTop(top);
        break;
    }
  }

  // 获取登录用户信息
  var userInfo = $.cookie("info");
  // 发送按钮布尔值
  var sendBln = true;
  // 初始昵称
  var initNick;
  if (userInfo) {
    userInfo = JSON.parse(userInfo);
    // 昵称
    $(".showName.Nickname").html(userInfo.nickname);
    $(".myself .Nickname").html(userInfo.nickname);
    // 连接websocket
    // var ws = io("ws://8.129.144.128:7777");
    var ws = io("ws://localhost:7777");
    ws.on("connect", function () {
      userInfo.wsId = ws.id;
      // 登录
      ws.emit("login", userInfo);
    });
    // 退出登录
    $(".logout").on("click", function () {
      $.removeCookie("info", { path: "/" });
      ws.disconnect();
      window.location.href = "index.html";
    });
    // 修改昵称
    $(".showName").on("dblclick", function () {
      initNick = $(this).html();
      $(this).hide();
      $("#nickname").val(initNick);
      $("#nickname").show();
      $("#nickname").focus();
    });
    $("#nickname").on("blur", function () {
      var $nickName = $("#nickname").val();
      if ($nickName != initNick) {
        // 修改昵称
        userInfo.nickname = $nickName;
        ws.emit("nickname", userInfo);
      }
      $("#nickname").hide();
      $(".showName").show();
    });
    $("#nickname").on("keydown", function (event) {
      var e = event || window.event;
      if (e.keyCode == 13) {
        $("#nickname").blur();
      }
    });
    // 发送消息
    $("#sendBtn").on("click", function () {
      if (!sendBln) return;
      var msg = $("#sendInput").val();
      if (msg === "") return;
      // 发送
      ws.emit("send", {
        user: userInfo,
        msg: msg,
      });
      // 清空
      $("#sendInput").val("");
    });
    $("#sendInput").on("keydown", function (event) {
      var e = event || window.event;
      if (e.keyCode == 13) {
        $("#sendBtn").click();
      }
    });

    // 发送文件提示    type：类型   0：发送中   1：已发送     filename:发送的文件名
    function handleSend(type, filename) {
      switch (type) {
        case 0:
          // 发送中
          $("#sendInput").attr("disabled", "disabled");
          sendBln = false;
          $("#sendBtn").addClass("sendBtn_no");
          $(".sendInputTips").show();
          $(".uploadName").html(filename);
          $(".uploadTips").show();
          break;
        case 1:
          // 已发送
          $("#sendInput").removeAttr("disabled");
          sendBln = true;
          $("#sendBtn").removeClass("sendBtn_no");
          $(".sendInputTips").hide();
          $(".uploadName").html("");
          $(".uploadTips").hide();
          break;
        default:
          break;
      }
    }
    // 上传文件   files:file文件
    function uploadFile(files) {
      if (!files) return;
      let fileData = new FormData();
      fileData.append("uploadFile", files);
      // 上传过程中显示正在发送中
      handleSend(0, files.name);
      $.ajax({
        type: "POST",
        url: "http://localhost:7000/user/uploadFile",
        // url: "http://8.129.144.128:7777/user/uploadFile",
        data: fileData,
        //ajax发送文件必须要指定两个参数
        processData: false, //告诉浏览器不要对你的数据进行任何处理
        contentType: false, //不要使用任何编码，django后端能够自动识别formdata对象
        success: function (res) {
          if (res.code === 1) {
            // 上传成功
            handleSend(1);
            let { url, type, name } = res.info;
            handleMsg(url, type, name);
          } else {
            // 上传失败
            handleSend(1);
            handleTips({
              value: res.msg,
              type: "error",
              callback: function () {
                // 取消"正在发送中"
                handleSend(1);
              },
            });
          }
        },
        error: function (res) {
          // 请求失败
          handleTips({
            value: "发送失败",
            type: "error",
            callback: function () {
              // 取消"正在发送中"
              handleSend(1);
            },
          });
        },
      });
    }
    //  文件转发处理  url:网络地址  type:文件类型  name:文件名
    function handleMsg(url, type, name) {
      // 保存转发消息
      var html;
      switch (type) {
        case "image":
          // 图片
          html = `<img class="send_img" src="${url}">`;
          break;
        case "video":
          // 视频
          html = `<video controls="controls" src="${url}" class="send_video"></video>`;
          break;
        case "audio":
          // 音频
          html = `<audio controls="controls" src="${url}" class="send_audio"></audio>`;
          break;
        default:
          // 其他文件
          html = `<a href="${url}" class="send_file" download="${name}">${name}</a>`;
          break;
      }
      // 发送
      ws.emit("send", {
        user: userInfo,
        msg: html,
      });
    }

    // 发送图片
    $(".sendImg").on("click", function () {
      $("#sendImg").click();
    });

    $("#sendImg").on("change", function () {
      // 若无文件直接退出
      if (!$(this).val()) return;
      // 文件内容
      var file = $(this)[0].files[0];
      uploadFile(file);
      // 清空
      $(this).val("");
    });
    // 发送音频
    $(".sendAudio").on("click", function () {
      $("#sendAudio").click();
    });
    $("#sendAudio").on("change", function () {
      // 若无文件直接退出
      if (!$(this).val()) return;
      var file = $(this)[0].files[0];
      uploadFile(file);
      // 清空
      $(this).val("");
    });
    // 发送视频
    $(".sendVideo").on("click", function () {
      $("#sendVideo").click();
    });
    $("#sendVideo").on("change", function () {
      // 若无文件直接退出
      if (!$(this).val()) return;
      var file = $(this)[0].files[0];
      uploadFile(file);
      // 清空
      $(this).val("");
    });
    // 发送文件
    $(".sendFile").on("click", function () {
      $("#sendFile").click();
    });
    $("#sendFile").on("change", function () {
      // 若无文件直接退出
      if (!$(this).val()) return;
      var file = $(this)[0].files[0];
      uploadFile(file);
      // 清空
      $(this).val("");
    });

    // 接收发送信息
    ws.on("send_msg", function (data) {
      if (data.user) {
        // 其他人说的
        var hisHtml = `<div class="hisWords word_item">
                             <div class="hisInfo Info_item" data-id="${data.user.id}" data-wsId="${data.user.wsId}">
                                <div class="headImg"></div> 
                                <span class="Nickname">${data.user.nickname}</span>   
                             </div>
                             <div class="hisWord clearfix">
                                <span class="left addword">${data.msg}</span>
                             </div>
                        </div>`;
        $(".content_left").append(hisHtml);
      } else {
        // 自己说的
        var myHtml = `<div class="myWords word_item">
                          <div class="myInfo Info_item clearfix">
                              <div class="headImg"></div> 
                          </div>
                          <div class="myWord clearfix">
                            <span class="right addword">${data.msg}</span>
                          </div>
                      </div>`;
        $(".content_left").append(myHtml);
      }
      // 指定滚动最底部
      scrollBottom();
    });
    // 接收登录信息  -->所有用户信息
    ws.on("login_msg", function (data) {
      var total = data.length;
      $(".total").html(total);
      // 除去自己本身
      data = data.filter((item) => item.id !== userInfo.id);
      var html = "";
      // 用户列表
      data.forEach((item) => {
        html += `<div class="Info_item" data-id="${item.id}" data-wsId="${item.wsId}">
                    <div class="headImg"></div> 
                    <span class="Nickname">${item.nickname}</span>   
                </div>`;
      });
      $(".Info_list").html(html);
      // 指定滚动最底部
      scrollBottom();
    });
    // 接收登录提示  -->用户加入
    ws.on("login_tips", function (data) {
      var joinTime = dateFormatter(new Date(), "yyyy-MM-dd HH:mm:ss");
      var tipsHtml = `<div class="tips word_item" data-id="${data.id}" data-wsId="${data.wsId}">
                          <span class="joinTime">${joinTime}<span>&nbsp;&nbsp;
                          <span class="joinName Nickname" >${data.nickname}</span>进入尬聊
                      </div>`;
      $(".content_left").append(tipsHtml);
    });
    // 接收修改信息
    ws.on("nickname_msg", function (data) {
      if (data.code !== 0) {
        // 修改成功
        if (data.user.id === userInfo.id) {
          // 修改cookie
          $.cookie("info", JSON.stringify(userInfo));
        }
        $(".showName.Nickname").html(userInfo.nickname);
        $(".myself .Nickname").html(userInfo.nickname);
        $(`[data-id=${data.user.id}]`)
          .find(".Nickname")
          .html(data.user.nickname);
      } else {
        // 修改失败
        // 跳转登录页
        handleTips({
          value: "昵称修改失败",
          callback: function () {
            userInfo.nickname = initNick;
            $(".showName.Nickname").html(userInfo.nickname);
            $(".myself .Nickname").html(userInfo.nickname);
          },
        });
      }
    });
    // 接收重复登录信息
    ws.on("repeat_login", function (data) {
      // 跳转登录页
      handleTips({
        value: data,
        type: "error",
        callback: function () {
          ws.disconnect();
          $.removeCookie("info", { path: "/" });
          window.location.href = "index.html";
        },
      });
    });
    // 接收退出消息
    ws.on("logout", function (data) {
      var outTime = dateFormatter(new Date(), "yyyy-MM-dd HH:mm:ss");
      var outHtml = `<div class="tips word_item" data-id="${data.id}" data-wsId="${data.wsId}">
                          <span class="joinTime">${outTime}<span>&nbsp;&nbsp;
                          <span class="joinName Nickname" >${data.nickname}</span>退出尬聊
                      </div>`;
      $(".content_left").append(outHtml);
      // 退出的用户
      var outEle = $(`.Info_item[data-id="${data.id}"]`);
      // 删除退出用户
      outEle.remove();
      // 指定滚动最底部
      scrollBottom();
    });
  } else {
    // 跳转登录页
    handleTips({
      value: "尚未登录,跳转登录页",
      type: "error",
      callback: function () {
        window.location.href = "index.html";
      },
    });
  }
});
